<template>
  <div>
    <!-- 2222 -->
    <div
      v-if="this.tType === '2'"
      class="bg1-img-box"
      @click="triggerUpload('upload_file')"
    >
      <input
        id="upload_file"
        type="file"
        class="file-input"
        ref="file"
        accept="image/*"
        @change="inputChange"
        v-show="false"
      />
      <div v-show="!showimg">
        <div class="symbol">+</div>
        <div class="upload-text">点击上传照片</div>
      </div>
      <div class="image" v-show="showimg">
        <img id="imgIcon" :src="imgurl" alt="" />
      </div>
    </div>
    <!-- 2222 -->
    <div
      v-if="this.tType === '1'"
      class="img-box"
      @click="triggerUpload('upload_file')"
    >
      <input
        id="upload_file"
        type="file"
        class="file-input"
        ref="file"
        accept="image/*"
        @change="inputChange"
        v-show="false"
      />
      <img src="@/assets/upload.png" alt="" v-show="!showimg" />
      <img ref="testImg" id="imgIcon" :src="imgurl" v-show="showimg" />
    </div>
  </div>
</template>

<script>
import { EXIF } from "@/utils/small-exif.js";
export default {
  props: {
    tType: String
  },
  data() {
    return {
      picValue: {},
      headerImage: "",
      showimg: false,
      imgurl: ""
    };
  },
  methods: {
    triggerUpload(id) {
      document.getElementById(id).click();
      //   this.$emit("upload");
    },
    inputChange() {
      let ipt = document.getElementById("upload_file");

      let img = document.getElementById("imgIcon");
      let Orientation = null;
      var file = ipt.files[0],
        reader = new FileReader(),
        image = new Image();

      if (file) {
        EXIF.getData(file, function() {
          Orientation = EXIF.getTag(this, "Orientation");
        });
        reader.onload = function(ev) {
          image.src = ev.target.result;
          image.onload = function() {
            var imgWidth = this.width,
              imgHeight = this.height;

            if (imgWidth > imgHeight && imgWidth > 750) {
              imgWidth = 750;
              imgHeight = Math.ceil((750 * this.height) / this.width);
            } else if (imgWidth < imgHeight && imgHeight > 1334) {
              imgWidth = Math.ceil((1334 * this.width) / this.height);
              imgHeight = 1334;
            }

            var canvas = document.createElement("canvas"),
              ctx = canvas.getContext("2d");
            canvas.width = imgWidth;
            canvas.height = imgHeight;
            if (Orientation && Orientation != 1) {
              switch (Orientation) {
                case 6:
                  canvas.width = imgHeight;
                  canvas.height = imgWidth;
                  ctx.rotate(Math.PI / 2);
                  ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                  break;
                case 3:
                  ctx.rotate(Math.PI);
                  ctx.drawImage(
                    this,
                    -imgWidth,
                    -imgHeight,
                    imgWidth,
                    imgHeight
                  );
                  break;
                case 8:
                  canvas.width = imgHeight;
                  canvas.height = imgWidth;
                  ctx.rotate((3 * Math.PI) / 2);
                  ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
                  break;
              }
            } else {
              ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
            }
            img.src = canvas.toDataURL("image/jpeg", 1);
          };
        };
        reader.readAsDataURL(file);
        this.showimg = true;
      }
    }
  },
  upload(e) {
    console.log(e);
    let files = e.target.files || e.dataTransfer.files;
    if (!files.length) return;
    this.picValue = files[0];
    this.imgPreview(this.picValue);
  },
  imgPreview(file) {
    let self = this;
    let Orientation;
    //去获取拍照时的信息，解决拍出来的照片旋转问题
    Exif.getData(file, function() {
      Orientation = Exif.getTag(this, "Orientation");
    });
    // 看支持不支持FileReader
    if (!file || !window.FileReader) return;

    if (/^image/.test(file.type)) {
      // 创建一个reader
      let reader = new FileReader();
      // 将图片2将转成 base64 格式
      reader.readAsDataURL(file);
      // 读取成功后的回调
      reader.onloadend = function() {
        let result = this.result;
        let img = new Image();
        img.src = result;
        //判断图片是否大于100K,是就直接上传，反之压缩图片
        if (this.result.length <= 100 * 1024) {
          self.headerImage = this.result;
          // self.postImg();
        } else {
          img.onload = function() {
            let data = self.compress(img, Orientation);
            self.headerImage = data;
            //   self.postImg();
          };
        }
      };
    }
  },
  compress(img, Orientation) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    //瓦片canvas
    let tCanvas = document.createElement("canvas");
    let tctx = tCanvas.getContext("2d");
    let initSize = img.src.length;
    let width = img.width;
    let height = img.height;
    //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
    let ratio;
    if ((ratio = (width * height) / 4000000) > 1) {
      console.log("大于400万像素");
      ratio = Math.sqrt(ratio);
      width /= ratio;
      height /= ratio;
    } else {
      ratio = 1;
    }
    canvas.width = width;
    canvas.height = height;
    //        铺底色
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    //如果图片像素大于100万则使用瓦片绘制
    let count;
    if ((count = (width * height) / 1000000) > 1) {
      console.log("超过100W像素");
      count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
      //            计算每块瓦片的宽和高
      let nw = ~~(width / count);
      let nh = ~~(height / count);
      tCanvas.width = nw;
      tCanvas.height = nh;
      for (let i = 0; i < count; i++) {
        for (let j = 0; j < count; j++) {
          tctx.drawImage(
            img,
            i * nw * ratio,
            j * nh * ratio,
            nw * ratio,
            nh * ratio,
            0,
            0,
            nw,
            nh
          );
          ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
        }
      }
    } else {
      ctx.drawImage(img, 0, 0, width, height);
    }
    //修复ios上传图片的时候 被旋转的问题
    if (Orientation != "" && Orientation != 1) {
      switch (Orientation) {
        case 6: //需要顺时针（向左）90度旋转
          this.rotateImg(img, "left", canvas);
          break;
        case 8: //需要逆时针（向右）90度旋转
          this.rotateImg(img, "right", canvas);
          break;
        case 3: //需要180度旋转
          this.rotateImg(img, "right", canvas); //转两次
          this.rotateImg(img, "right", canvas);
          break;
      }
    }
    //进行最小压缩
    let ndata = canvas.toDataURL("image/jpeg", 0.1);
    tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
    return ndata;
  },
  rotateImg(img, direction, canvas) {
    //最小与最大旋转方向，图片旋转4次后回到原方向
    const min_step = 0;
    const max_step = 3;
    if (img == null) return;
    //img的高度和宽度不能在img元素隐藏后获取，否则会出错
    let height = img.height;
    let width = img.width;
    let step = 2;
    if (step == null) {
      step = min_step;
    }
    if (direction == "right") {
      step++;
      //旋转到原位置，即超过最大值
      step > max_step && (step = min_step);
    } else {
      step--;
      step < min_step && (step = max_step);
    }
    //旋转角度以弧度值为参数
    let degree = (step * 90 * Math.PI) / 180;
    let ctx = canvas.getContext("2d");
    switch (step) {
      case 0:
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0);
        break;
      case 1:
        canvas.width = height;
        canvas.height = width;
        ctx.rotate(degree);
        ctx.drawImage(img, 0, -height);
        break;
      case 2:
        canvas.width = width;
        canvas.height = height;
        ctx.rotate(degree);
        ctx.drawImage(img, -width, -height);
        break;
      case 3:
        canvas.width = height;
        canvas.height = width;
        ctx.rotate(degree);
        ctx.drawImage(img, -width, 0);
        break;
    }
  }
};
</script>
<style>
.input-div {
  position: relative;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: #03a9f4;
}
#files {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 40px;
  opacity: 0;
  z-index: 10;
}
#preview {
  width: 300px;
}
</style>
